<template>
  <div>

    <el-dialog
      title="修改设备类型"
      :visible.sync="dialogVisible"
      width="600px"
    >
      <el-form
        @keyup.enter.native="update"
        ref="editDataForm"
        :model="dataForm"
        :label-width="formLabelWidth"
        :show-message="false"
      >
        <el-form-item
          prop="name"
          label="设备类型名称"
          required
        >
          <el-input
            class="input"
            v-model="dataForm.name"
            auto-complete="off"
            placeholder="请输入设备类型名称"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="description"
          label="设备类型描述"
        >
          <el-input
            class="input"
            v-model="dataForm.description"
            auto-complete="off"
            placeholder="请输入设备类型描述"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="imageUrl"
          label="设备类型图片"
        >
          <image-upload
            class="image-upload-box"
            v-model="dataForm.imageUrl"
          >
          </image-upload>
          <div
            v-if="dataForm.imageUrl"
            class="remove-btn-box"
          >
            <el-button
              type="text"
              class="remove-btn"
              @click="removeImage"
              icon="el-icon-delete"
            >
            </el-button>
          </div>
        </el-form-item>
        <el-form-item
          prop="active"
          label="是否启用"
          required
        >
          <el-select
            class="input"
            v-model="dataForm.active"
          >
            <el-option
              v-for="item in optionStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="deviceParameterList"
          label="设备参数"
          required
        >
          <el-select
            class="input"
            v-model="dataForm.deviceParameterList"
            multiple
            filterable
            remote
            reserve-keyword
            placeholder="请选择"
            :remote-method="remoteParameterSearch"
            :loading="remoteLoading"
            value-key="id"
            clearable
            @focus="remoteParameterSearch()"
          >
            <el-option
              v-for="parameter in parameterList"
              :key="parameter.id"
              :label="parameter.label"
              :value="parameter"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="defaultDeviceParameterId"
          label="默认设备参数"
          required
        >
          <el-select
            class="input"
            v-model="dataForm.defaultDeviceParameterId"
            placeholder="请选择"
          >
            <el-option
              class="input"
              v-for="parameter in dataForm.deviceParameterList"
              :key="parameter.id"
              :label="parameter.label"
              :value="parameter.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="update"
          :loading="btnLoading"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import lanDialog from '../../../components/lanDialog';
import { MomentFormat, SortType } from '../../../constants/common';
import { Message, MessageBox } from 'element-ui';
import ImageUpload from '../../../components/ImageUpload';
import { parseError } from '../../../utils';
import { updateDeviceTypeApi } from '../../../api/deviceType';
import { queryDeviceParameterListApi } from '../../../api/deviceParameter';

export default {
  components: {
    ImageUpload
  },
  data() {
    this.uuid = '';
    this.formLabelWidth = '120px';
    return {
      optionStatus: [
        {
          value: true,
          label: '启用'
        },
        {
          value: false,
          label: '不启用'
        }
      ],
      dialogVisible: false,
      btnLoading: false,
      remoteLoading: false,
      parameterList: [],
      dataForm: {
        name: '',
        description: '',
        imageUrl: '',
        active: false,
        deviceParameterList: [],
        defaultDeviceParameterId: ''
      }
    };
  },
  watch: {
    dialogVisible: {
      handler(value) {
        if (!value) {
          this.$refs.editDataForm.resetFields();
          this.uuid = '';
        }
      }
    }
  },
  methods: {
    removeImage() {
      this.dataForm.imageUrl = '';
    },
    showDialog(row) {
      this.parameterList = row.deviceParameterList.map(parameter => {
        return {
          id: parameter.id,
          label: `${parameter.display_name}(${parameter.name})`
        };
      });
      Object.assign(this.dataForm, {
        uuid: row.uuid,
        name: row.name,
        description: row.description,
        imageUrl: row.imageUrl,
        active: row.active,
        deviceParameterList: row.deviceParameterList.map(parameter => {
          return {
            id: parameter.id,
            label: `${parameter.display_name}(${parameter.name})`
          };
        }),
        defaultDeviceParameterId: row.deviceParameterList.find(parameter => parameter.default).id
      });
      this.dialogVisible = true;
    },
    update() {
      const validError = validateForm(this.dataForm);
      if (validError) return Message.warning(validError);
      this.btnLoading = true;
      updateDeviceTypeApi(
        this.dataForm.uuid,
        this.dataForm.name,
        this.dataForm.description,
        this.dataForm.imageUrl,
        this.dataForm.active,
        this.dataForm.deviceParameterList.map(item => item.id),
        this.dataForm.defaultDeviceParameterId
      )
        .then(res => {
          Message.success('更新成功');
          this.dialogVisible = false;
          this.$emit('refresh');
        })
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.btnLoading = false));
    },
    remoteParameterSearch(query) {
      this.remoteLoading = true;
      queryDeviceParameterListApi(query, 10)
        .then(
          parameterList =>
            (this.parameterList = parameterList.map(parameter => {
              return {
                id: parameter.id,
                label: `${parameter.display_name}(${parameter.name})`
              };
            }))
        )
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.remoteLoading = false));
    }
  }
};
</script>

<style lang="scss" scoped>
.input {
  width: 300px;
}
/deep/.el-icon-delete {
  font-size: 20px;
  color: red;
}
/deep/ .remove-btn {
  border-radius: 45px;
  border: 0px;
  padding: 0;
}
.image-upload-box {
  position: relative;
}
.remove-btn-box {
  width: 178px;
  height: 178px;
  background: rgba($color: #000000, $alpha: 0);
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0;
  top: 0;
  .remove-btn {
    display: none;
  }
}
.remove-btn-box:hover {
  background: rgba($color: #000000, $alpha: 0.3);
  .remove-btn {
    display: block;
  }
}
</style>
